<template>
	<view class="box">
		<!-- 步骤条 -->
		<view class="top">
			<u-navbar height="50" back-icon-color="#333" title="商家入驻" title-color="#333" title-size="36">
			</u-navbar>
		</view>
		<view class="steps">
			<view class="Progress">
				<view class="item" :class="{active:num==-1}">
					1
				</view>
				<view class="line">

				</view>
				<view class="item" :class="{active:num==0}">
					2
				</view>
				<view class="line">

				</view>
				<view class="item" :class="{active:num==1}">
					3
				</view>
			</view>
			<view class="ProgressCt">
				<view class="item">
					<view class="title">
						资料填写
					</view>
					<view class="remark">
						真实信息
					</view>
				</view>
				<view class="item">
					<view class="title">
						平台审核
					</view>
					<view class="remark">
						1-3工作日
					</view>
				</view>
				<view class="item">
					<view class="title">
						审核通过
					</view>
					<view class="remark">
						入驻成功
					</view>
				</view>
			</view>
		</view>
		<!-- 步骤1 -->
		<view class="stepOne" v-if="num==-1">
			<!-- 申请入驻资料信息 -->
			<view class="Ms_info">
				<view class="info">
					申请入驻资料信息
				</view>
				<view class="item">
					<view class="title">
						<span style="color: #FA453CFF;">*</span>店铺名称
					</view>
					<view class="ipt">
						<input type="text" placeholder="请输入商家名称" v-model="name" />
					</view>
				</view>
				<view class="item">
					<view class="title">
						<span style="color: #FA453CFF;">*</span>经营地址
					</view>
					<view class="ipt" @click="value = true">
						<input type="text" placeholder="请选择位置" v-model="cityData" :disabled="true" />
					</view>
					<view class="dw">
						<u-icon name="map" size="32" color="#666"></u-icon>
					</view>
				</view>
				<view class="item">
					<view class="title">
						<span style="color: #FA453CFF;">*</span>详细地址
					</view>
					<view class="ipt">
						<input type="text" placeholder="例如街道,门牌号" v-model="address" />
					</view>
				</view>
			</view>
			<!-- 联系人信息 -->
			<view class="relationInfo">
				<view class="item cancel">
					<view class="title">
						<span style="color: #FA453CFF;">*</span>姓名
					</view>
					<view class="ipt">
						<input type="text" placeholder="请输入联系人" v-model="linkman" />
					</view>
				</view>
				<view class="item">
					<view class="title">
						<span style="color: #FA453CFF;">*</span>联系电话
					</view>
					<view class="ipt">
						<input type="number" placeholder="请输入联系人电话" v-model="phone" />
					</view>
				</view>
			</view>
			<!-- 上传身份证照片 -->
			<view class="uploSfz">
				<view class="title">
					<span style="color: #FA453CFF;">*</span>上传身份证照片
				</view>
				<view class="pic">
					<view class="item" @click="handleChooseImage(2)">
						<image v-if="icard_images_1.show" :src="icard_images_1.show"
							style="width: 330rpx; height: 240rpx;">
						</image>
						<image v-else src="/static/ucenter/sfzz.png" mode="widthFix"
							style="width: 330rpx; height: 240rpx;">
						</image>
					</view>
					<view class="item" @click="handleChooseImage(3)">
						<image v-if="icard_images_2.show" :src="icard_images_2.show"
							style="width: 330rpx; height: 240rpx;">
						</image>
						<image v-else src="/static/ucenter/sfzf.png" mode="widthFix"
							style="width: 330rpx; height: 240rpx;">
						</image>
					</view>
				</view>
			</view>
			<!-- 上传营业执照 -->
			<view class="uploSfz" @click="handleChooseImage(1)">
				<view class="title">
					<span style="color: #FA453CFF;">*</span>营业执照
				</view>
				<view class="pic">
					<view class="item">
						<image v-if="licence_images.show" :src="licence_images.show"
							style="width: 330rpx; height: 240rpx;">
						</image>
						<image v-else src="/static/ucenter/uploadYYzz.png" mode="widthFix"
							style="width: 330rpx; height: 240rpx;">
						</image>
					</view>
				</view>
			</view>
			<!-- 是否同意 -->
			<view class="agree">
				<view class="pic" v-if="show" @click="()=>this.show=false">
					<image src="/static/icons/xz.png" mode="widthFix" style="width: 36rpx;height: 36rpx;"></image>
				</view>
				<view class="select" style="width: 36rpx;height: 36rpx; border-radius: 50%;border: 1rpx solid #333;"
					v-else @click="()=>this.show=true">
				</view>
				<view class="ct">
					我已阅读并同意<span style="color: #FA453CFF;" @click="go('/other/WebData/WebData?type=1')">《商家入驻协议》</span>
				</view>
			</view>
			<!-- 申请入驻按钮 -->
			<view class="btn" @click="submit">
				申请入驻
			</view>
		</view>
		<!-- 步骤2 -->
		<view class="stepTwo" v-if="num==0" style="margin: 100rpx auto;width: 450rpx;height: 254rpx;">
			<view class="pic" style="margin: 100rpx auto;width: 450rpx;height: 254rpx;">
				<image src="/static/ucenter/shing.png" mode="widthFix" style="width: 450rpx;height: 254rpx;"></image>
			</view>
			<view class="desc" style="margin: 20rpx auto;width: 380rpx; line-height: 50rpx;">
				资料审核中，预计需要1-3个工作日
				敬请耐心等待，谢谢！
			</view>
		</view>
		<!-- 步骤3 -->
		<view class="stepTwice" v-if="num==1">
			<view class="pic" style="margin: 100rpx auto;width: 450rpx;height: 254rpx;">
				<image src="/static/ucenter/shtg.png" mode="widthFix" style="width: 450rpx;height: 254rpx;"></image>
			</view>
			<view class="desc" style="margin: 20rpx auto;width: 380rpx; line-height: 50rpx;">
				资料审核通过，商家入驻已完成
				进入商家中心查看更多！
			</view>
			<view class="btn" @click="go('/other/storeCenter/storeCenter')">
				进入商家中心
			</view>
		</view>
		<!-- 结果 -->
		<u-popup v-model="shows" mode="center" width="610rpx" height="420rpx" :closeable="true" border-radius="20">
			<view class="popBox">
				<view class="ts">
					<u-icon name="info-circle" size="80" color="#999"></u-icon>
				</view>
				<view class="desc">
					{{reason}}
				</view>
				<view class="agreeBtn" @click="()=>this.shows = false">
					好的
				</view>
			</view>
		</u-popup>
		<u-popup v-model="value" mode="bottom" :popup="false" :mask="true" :closeable="true"
			:safe-area-inset-bottom="true" close-icon-color="#ffffff" :maskCloseAble="true" @close="close">
			<u-tabs v-if="value" :list="genTabsList" :is-scroll="true" :current="tabsIndex" @change="tabsChange"
				ref="tabs"></u-tabs>
			<view class="area-box">
				<view class="u-flex" :class="{ 'change':isChange }">
					<view class="area-item">
						<view class="u-padding-10 u-bg-gray" style="height: 100%;">
							<scroll-view :scroll-y="true" style="height: 100%">
								<u-cell-group>
									<u-cell-item v-for="(item,index) in provinces" :title="item.label" :arrow="false"
										:index="index" :key="index" @click="provinceChange">
										<u-icon v-if="isChooseP&&province===index" slot="right-icon" size="34"
											name="checkbox-mark"></u-icon>
									</u-cell-item>
								</u-cell-group>
							</scroll-view>
						</view>
					</view>
					<view class="area-item">
						<view class="u-padding-10 u-bg-gray" style="height: 100%;">
							<scroll-view :scroll-y="true" style="height: 100%">
								<u-cell-group v-if="isChooseP">
									<u-cell-item v-for="(item,index) in citys" :title="item.label" :arrow="false"
										:index="index" :key="index" @click="cityChange">
										<u-icon v-if="isChooseC&&city===index" slot="right-icon" size="34"
											name="checkbox-mark"></u-icon>
									</u-cell-item>
								</u-cell-group>
							</scroll-view>
						</view>
					</view>

					<view class="area-item">
						<view class="u-padding-10 u-bg-gray" style="height: 100%;">
							<scroll-view :scroll-y="true" style="height: 100%">
								<u-cell-group v-if="isChooseC">
									<u-cell-item v-for="(item,index) in areas" :title="item.label" :arrow="false"
										:index="index" :key="index" @click="areaChange">
										<u-icon v-if="isChooseA&&area===index" slot="right-icon" size="34"
											name="checkbox-mark"></u-icon>
									</u-cell-item>
								</u-cell-group>
							</scroll-view>
						</view>
					</view>
				</view>
			</view>
		</u-popup>

	</view>
</template>
<script>
	import config from '../../config/config';
	import {
		toast
	} from '../../utils/common'
	import {
		storeCreate,
		getStoreStatus,
		updateStoreSettle
	} from '@/api/index.js'
	import provinces from "@/utils/province.js";
	import citys from "@/utils/city.js";
	import areas from "@/utils/area.js";
	export default {
		data() {
			return {
				num: -1,
				//进度
				show: false,
				shows: false,
				cityData: "",
				address: "",
				name: "",
				typeId: "",
				mch_type: "",
				licence_images: {
					show: "",
					sub: ""
				},
				linkman: "",
				phone: "",
				icard_images_1: {
					show: "",
					sub: ""
				},
				icard_images_2: {
					show: "",
					sub: ""
				},
				logo_images: "",
				lat: "",
				lng: "",
				typeList: [{
						id: 1,
						name: "食品商户"
					},
					{
						id: 2,
						name: "零售商户"
					}
				],
				value: false,
				isChooseP: false, //是否已经选择了省
				province: 0, //省级下标
				provinces: provinces,
				isChooseC: false, //是否已经选择了市
				city: 0, //市级下标
				citys: citys[0],
				isChooseA: false, //是否已经选择了区
				area: 0, //区级下标
				areas: areas[0][0],
				tabsIndex: 0,
				provinceName: '',
				cityName: '',
				district: '',
				reason: ""

			}
		},
		onLoad() {
			this.initData()
		},
		computed: {
			isChange() {
				return this.tabsIndex > 1;
			},
			genTabsList() {
				let tabsList = [{
					name: "请选择"
				}];
				if (this.isChooseP) {
					tabsList[0]['name'] = this.provinces[this.province]['label'];
					tabsList[1] = {
						name: "请选择"
					};
				}
				if (this.isChooseC) {
					tabsList[1]['name'] = this.citys[this.city]['label'];
					tabsList[2] = {
						name: "请选择"
					};
				}
				if (this.isChooseA) {
					tabsList[2]['name'] = this.areas[this.area]['label'];
				}
				return tabsList;
			}
		},

		methods: {
			initData() {
				getStoreStatus().then(res => {
					console.log(res);
					this.num = res.data.status
					if (res.data.reason&&res.data.status==-1) {
						this.shows = true
						this.reason = res.data.reason
					}
				})
			},

			go(url) {
				uni.navigateTo({
					url
				})
			},
			// 地址选择
			goSelectAddress() {
				let that = this
				uni.navigateTo({
					url: '/page/addressSelect/addressSelect'
				})
			},
			handleChooseImage(index) {
				uni.chooseImage({
					count: 1,
					sourceType: ['album'],
					success: res => {
						let filePath = res.tempFilePaths[0];
						// upImage({file:filePath}).then(res=>{
						// 	console.log(res);
						// })
						uni.showLoading({
							title: "正在上传"
						})
						uni.uploadFile({
							url: config.baseUrl + "public/images/upload",
							filePath: filePath,
							name: 'file',

							success: (res) => {
								console.log(res);
								let data = JSON.parse(res.data)
								if (data.code == 200) {
									uni.hideLoading()
									toast("上传成功")
									if (index === 1) {
										this.licence_images.sub = data.data
										this.licence_images.show = config.base + 'uploads/' + data
											.data
									}
									if (index === 3) {
										this.icard_images_2.sub = data.data
										this.icard_images_2.show = config.base + 'uploads/' + data
											.data
									}
									if (index === 2) {
										this.icard_images_1.sub = data.data
										this.icard_images_1.show = config.base + 'uploads/' + data
											.data
									}

								} else {
									uni.hideLoading()
									toast(res.message)
								}

							}
						})

					}

				});

			},
			submit() {
				let obj = {

					region: [{
							'value': this.provinceName.value,
							'label': this.provinceName.label
						},
						{
							'value': this.cityName.value,
							'label': this.cityName.label
						},
						{
							'value': this.district.value,
							'label': this.district.label
						}
					],
					name: this.name,
					detail: this.address,
					license: this.licence_images.sub,
					business_name: this.linkman,
					phone: this.phone,
					card_font: this.icard_images_1.sub,
					card_back: this.icard_images_2.sub,

				}

				if (!obj.name) {
					uni.showToast({
						title: "请输入商家名称",
						icon: "none"
					})
					return
				}
				if (!obj.license) {
					uni.showToast({
						title: "请添加营业执照",
						icon: "none"
					})
					return
				}
				if (!obj.business_name) {
					uni.showToast({
						title: "请输入联系人",
						icon: "none"
					})
					return
				}
				if (!obj.phone) {
					uni.showToast({
						title: "请输入联系人电话",
						icon: "none"
					})
					return
				}

				if (!obj.card_font) {
					uni.showToast({
						title: "请添加身份证正面",
						icon: "none"
					})
					return
				}
				if (!obj.card_back) {
					uni.showToast({
						title: "请添加身份证反面",
						icon: "none"
					})
					return
				}
				if (!this.show) {
					uni.showToast({
						title: "请勾选商家入驻协议",
						icon: "none"
					})
					return
				}
				console.log("查看", obj);
				if (this.reason) {

					updateStoreSettle(obj).then((res) => {
						console.log(res);
						if (res.code == 200) {
							uni.showToast({
								title: "提交成功",
								icon: "none"
							})
							setTimeout((res) => {
								uni.switchTab({
									url: '/pages/ucenter/ucenter'
								})
							}, 200)

						} else {
							uni.showToast({
								title: res.message,
								icon: "none"
							})
						}
					})
				} else {
					storeCreate(obj).then((res) => {
						console.log(res);
						if (res.code == 200) {
							uni.showToast({
								title: "提交成功",
								icon: "none"
							})
							setTimeout((res) => {
								uni.switchTab({
									url: '/pages/ucenter/ucenter'
								})
							}, 200)

						} else {
							uni.showToast({
								title: res.message,
								icon: "none"
							})
						}
					})
				}

			},
			init() {
				if (this.areaCode.length == 3) {
					this.setProvince("", this.areaCode[0]);
					this.setCity("", this.areaCode[1]);
					this.setArea("", this.areaCode[2]);
				} else if (this.defaultRegion.length == 3) {
					this.setProvince(this.defaultRegion[0], "");
					this.setCity(this.defaultRegion[1], "");
					this.setArea(this.defaultRegion[2], "");
				};
			},
			setProvince(label = "", value = "") {
				this.provinces.map((v, k) => {
					if (value ? v.value == value : v.label == label) {
						this.provinceChange(k);
					}
				})
			},
			setCity(label = "", value = "") {
				this.citys.map((v, k) => {
					if (value ? v.value == value : v.label == label) {
						this.cityChange(k);
					}
				})
			},
			setArea(label = "", value = "") {
				this.areas.map((v, k) => {
					if (value ? v.value == value : v.label == label) {
						this.isChooseA = true;
						this.area = k;
					}
				})
			},
			close() {
				this.value = false
			},
			tabsChange(index) {
				this.tabsIndex = index;
			},
			provinceChange(index) {
				this.isChooseP = true;
				this.isChooseC = false;
				this.isChooseA = false;
				this.province = index;
				this.citys = citys[index];
				this.tabsIndex = 1;
			},
			cityChange(index) {
				this.isChooseC = true;
				this.isChooseA = false;
				this.city = index;
				this.areas = areas[this.province][index];
				this.tabsIndex = 2;
			},
			areaChange(index) {
				this.isChooseA = true;
				this.area = index;
				let result = {};
				result.province = this.provinces[this.province];
				result.city = this.citys[this.city];
				result.area = this.areas[this.area];
				console.log(result);
				this.provinceName = result.province
				this.cityName = result.city
				this.district = result.area
				this.cityData = result.province.label + '-' + result.city.label + '-' + result.area.label
				this.close();
			}

		}
	}
</script>

<style lang="scss" scoped>
	.typeList {
		width: 750rpx;
		min-height: 300rpx;

		.cell {
			padding: 20rpx 0;
			text-align: center;
			border-top: 1rpx solid #dedede;

			&:nth-child(1) {
				margin-top: 80rpx;
			}
		}

		.cell.active {
			color: #fc4422;
		}
	}

	.box {
		background-color: #f5f5f5;
		box-sizing: border-box;
		padding: 1rpx;
		min-height: 100vh;
	}

	.steps {
		background-color: #fff;
	}

	// 步骤
	.Progress {
		margin-top: 20rpx;
		box-sizing: border-box;
		padding: 20rpx 60rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.item {
			font-size: 36rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #FFFFFF;
			width: 50rpx;
			height: 50rpx;
			background: #CCCCCC;
			border-radius: 50%;
			text-align: center;
			line-height: 50rpx;
		}

		.active {

			background: #fc4422;
		}

		.line {
			width: 220rpx;
			height: 2rpx;
			background: #E6E6E6;
		}
	}

	.ProgressCt {
		box-sizing: border-box;
		padding: 0 25rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		text-align: center;
		font-family: Source Han Sans CN;
		font-weight: 400;

		.title {
			font-size: 26rpx;
			color: #333333;
		}

		.remark {
			font-size: 22rpx;
			color: #999999;
		}
	}

	// 商家入驻信息
	.Ms_info,
	.relationInfo {
		box-sizing: border-box;
		padding: 20rpx;
		width: 750rpx;
		margin-top: 20rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		font-size: 30rpx;
		background-color: #fff;

		.info {
			font-size: 26rpx;
			color: #999;
			padding: 18rpx 0;
		}

		.item.cancel {
			border: none;
		}

		.item {
			display: flex;
			align-items: center;
			padding: 18rpx 0;
			border-top: 1rpx solid #E6E6E6;

			.title {
				width: 150rpx;
				margin: 0 60rpx 0 0;
			}

			.ipt {
				width: 480rpx;
				margin: 0 10rpx 0 0;
			}

		}


	}

	// 上传证件
	.uploSfz {
		width: 750rpx;
		box-sizing: border-box;
		padding: 20rpx;
		background-color: #fff;
		margin-top: 20rpx;
		font-size: 30rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;

		.pic {
			display: flex;
			justify-content: space-between;
			margin-top: 20rpx;

			.item {
				width: 340rpx;
				height: 250rpx;
				border: 1rpx dashed #333;
			}
		}
	}

	// 是否同意入驻条件
	.agree {
		display: flex;
		align-items: center;
		width: 750rpx;
		padding: 20rpx;
		box-sizing: border-box;
		margin-top: 60rpx;
		font-size: 28rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #333333;

		.pic {
			width: 36rpx;
			height: 36rpx;
			box-sizing: border-box;
			overflow: hidden;
			margin: 0 18rpx 0 0;
		}

		.select {
			margin: 0 18rpx 0 0;
		}
	}

	.btn {
		width: 710rpx;
		height: 76rpx;
		background: #fc4422;
		border-radius: 38rpx;
		margin: 40rpx auto;
		text-align: center;
		line-height: 76rpx;
		font-weight: 400;
		color: #FFFFFF;
		font-size: 30rpx;

	}

	.popBox {
		width: 610rpx;
		background: #FFFFFF;
		box-sizing: border-box;
		padding: 20rpx;

		.ts {
			margin: 20rpx auto;
			width: 80rpx;
			height: 80rpx;
		}

		.desc {
			font-size: 28rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #333333;
			line-height: 60rpx;
			margin-top: 20rpx;
			text-align: center;
		}

		.agreeBtn {
			width: 200rpx;
			height: 60rpx;
			background: #fc4422;
			border-radius: 30rpx;
			margin: 30rpx auto;
			text-align: center;
			line-height: 60rpx;
			color: #fff;
		}
	}

	.area-box {
		width: 100%;
		overflow: hidden;
		height: 800rpx;

		>view {
			width: 150%;
			transition: transform 0.3s ease-in-out 0s;
			transform: translateX(0);

			&.change {
				transform: translateX(-33.3333333%);
			}
		}

		.area-item {
			width: 33.3333333%;
			height: 800rpx;
		}
	}
</style>